<template>
    <div v-if="label=='开始'" >
        <div class="data-start " :class="status||''"   @dblclick="save">{{ label }}</div>
    </div>
    <div v-else-if="label=='结束'">
        <div class="data-start" :class="status||''"  @dblclick="save">{{ label }}</div>
    </div>
    <div v-else>
        <div class="data-other" :class="status||''"  @dblclick="save">
            <div class="data-other-top">
                <div class="data-other-top-left">
                    <img  src="@/assets/imgs/icon.png"/>
                    <span class="data-other-text" :title="label">
                   {{ label }}
                </span>
                </div>
                <span>{{ id }}</span>
            </div>
            <div class="data-other-bottom">
                <span class="data-other-bottom-content">{{ newLabel }}</span>
            </div>
        </div>
    </div>




</template>


<script>
import DataGird from './DataGrid.vue'
import {flowServiceStore} from '@data/store/flow';
import {storeToRefs} from 'pinia';
const flowCount = flowServiceStore();
const {graph} = storeToRefs(flowCount);
export default {
    inject: ['getNode'],
    components: {
        DataGird
    },
    data() {
        return {
            label: '',
            newLabel: '',
            flowId: '',
            name: '',
            status:'',
            dialogVisible: false,
            nodeId: ''
        }
    },
    mounted() {
        const cell = this.getNode();
        // console.log('cell',cell)
        this.nodeId = cell.id
        // cell.data.class = 'percentage-value';
        this.label = cell.data.label;
        this.newLabel = cell.data.nodeName || cell.data.label;
        this.flowId = cell.id;
        this.status = cell.status;
        this.id = cell.data.id;
        // this.id = cell.id.split('-')[cell.id.split('-').length - 1];

        cell.on("change:data", ({ current }) => {
            this.status = current?.status;
            this.newLabel = current?.nodeName;
        });

    },
    methods: {
            save() {
                const cell = this.getNode();
                if (cell) {
                    graph.value.emit('custom:event', { data:  cell });
                }
            }
    }

}
</script>
<style scoped lang="scss">

.data-start {
    cursor: pointer;
    color: #000;
    background-color: #fff;
    border-radius: 30px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.data-other {
    cursor: pointer;
    width: 170px;
    height: 65px;
    border-radius: 4px;
    background-color: #fff;
    font-size: 10px;

    .data-other-top {
        height: 30px;
        width: 100%;
        background: linear-gradient(90deg, #2794F3 0%, #30CCC3 100%);
        border-radius: 4px 4px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
        color: #fff;

        .data-other-top-left {
            display: flex;
            align-items: center;

            .data-other-text {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 77%;
            }
            img {
                width: 12px;
                height: 12px;
                margin-right: 5px;
            }
        }

    }

    .data-other-bottom {
        display: flex;
        align-items: center;
        height: 35px;

        .data-other-bottom-content {
            margin-left: 8px;
        }

    }




}


.running {
    /*background: linear-gradient(90deg, #F32727 0%, #F38D27 100%) !important;*/
    border:2px solid #2ae22a !important;
}
.error {
    /*background: linear-gradient(90deg, #F32727 0%, #F38D27 100%)!important;*/
    border:2px solid red!important;
}
.paused {
    /*background: linear-gradient(90deg, #F32727 0%, #F38D27 100%)!important;*/
    border:2px solid yellow!important;
}
.completed {
    /*background: linear-gradient(90deg, #2794F3 0%, #30CCC3 100%) !important;*/
    border: 2px solid #2794F3 !important;
}

</style>
